<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>

    <button>按钮</button>
    <script>
        //一、 添加事件监听 （观察者模式：一对多）
        // var btnEle= document.querySelector("button");
        // btnEle.onclick = function(){
        //     console.log("触发了2");
        // }

        // btnEle.onclick = function(){
        //     console.log("触发了2");
        // }

        // 添加事件监听  addEventListener
        // 第一个参数是事件类型 第二个参数是事件函数 
        // var btnEle= document.querySelector("button");
        // btnEle.addEventListener("click",function(){
        //     console.log("触发了");
        // })

        // 二、addEventListener 和 赋值式的事件绑定的区别
        // 1.写法不同 一个有on 一个没有 
        // var btnEle= document.querySelector("button");
        // // btnEle.onclick = function(){

        // // }

        // btnEle.addEventListener("click",function(){
        //         console.log("触发了");
        // })
        // 2.多个事件的时候  赋值式 事件绑定会覆盖 ，addEventListener不会覆盖
        // var btnEle= document.querySelector("button");
        // // btnEle.onclick = function(){
        // //     console.log(111)
        // // }
        // // btnEle.onclick = function(){
        // //     console.log(222)
        // // }

        // btnEle.addEventListener("click",function(){
        //     console.log(111);
        // })
        // btnEle.addEventListener("click",function(){
        //     console.log(2222);
        // })

    // 三、addEvnetLister 的兼容性 主流浏览器 
    // 如果是ie8或者以下浏览器 attachEvent() :注意需要加on
    var btnEle= document.querySelector("button");
    // btnEle.addEventListener("click",function(){
    //     console.log(111);
    // })
     // 如果是ie8或者以下浏览器 
    //  btnEle.attachEvent("onclick",function(){
    //      console.log("触发了")
    //  })
    bindEvent(btnEle,"click",function(){
        console.log("点击了");
    })
    // 会写一个添加事件监听的兼容性函数 
    function bindEvent(ele,eventName,fn){
        if(window.addEventListener){
            ele.addEventListener(eventName,fn);
        }else{
            // ie8或者以下
            ele.attachEvent("on"+eventName,fn);
        }
    }
    </script>
</body>
</html>